//分页渲染
window.onload = function(){
    $.ajax({
        type: "post",
        url: "http://118.195.129.130:3000/food/getInfoByPage",
        data: {
        page:1,
        per_page:4,
        },
        success: function (data) {
          if (data.err === 0) {
            alert("渲染成功");
            // console.log(data);
            var xuanran_arr= [data];
            console.log(xuanran_arr);
          } else {
            alert("渲染失败！");
          }
        },
        error: function (err) {
          console.log(err);
        },
      });
};

//添加功能
var add = document.querySelector(".add");
var hidden_add = document.querySelector(".hidden_add");
var hidden_add_btn_tip = document.querySelector(".hidden_add_btn_tip");
var hidden_add_btn_Second = document.querySelector(".hidden_add_btn_Second");
var tbody = document.querySelector("tbody"); //获取tbody

var hidden_add_textArea_one_right = document.querySelector(
  ".hidden_add_textArea_one_right"
);
var hidden_add_textArea_two_right = document.querySelector(
  ".hidden_add_textArea_two_right"
);
var hidden_add_textArea_three_right = document.querySelector(
  ".hidden_add_textArea_three_right"
);
var hidden_add_textArea_four_right = document.querySelector(
  ".hidden_add_textArea_four_right"
);
var hidden_add_textArea_five_right = document.querySelector(
  ".hidden_add_textArea_five_right"
);
var hidden_add_btn = document.querySelector(".hidden_add_btn");
var hidden_add_delect = document.querySelector(".hidden_add_delect");
//添加功能如何数据不全时提示，以及全的时候实现的添加功能
add.onclick = function () {
  alert("a");
  hidden_add.style.display = "block";
  hidden_add_delect.onclick = function () {
    hidden_add.style.display = "none";
  };
  hidden_add_btn.onclick = function () {
    if (
      hidden_add_textArea_one_right.value == "" ||
      hidden_add_textArea_two_right.value == "" ||
      hidden_add_textArea_three_right.value == "" ||
      hidden_add_textArea_four_right.value == "" ||
      hidden_add_textArea_five_right.value == ""
    ) {
      alert("您输入的数据不全！");
    } else {
      var datas_one = [
        {
          name: hidden_add_textArea_one_right.value,
          price: hidden_add_textArea_two_right.value,
          desc: hidden_add_textArea_three_right.value,
          typename: hidden_add_textArea_four_right.value,
          typeid: hidden_add_textArea_five_right.value,
        },
      ];
      var tbody = document.querySelector("tbody");
      for (let i = 0; i < datas_one.length; i++) {
        //外边的for循环管行
        // 1 创建行
        var tr = document.createElement("tr");
        tbody.appendChild(tr);
        tr.id ="id_tr";
        //行里边创建单元格 td 单元格的数量取决于每个对象里面的属性的个数
        for (var k in datas_one[i]) {
          // 2 创建单元格(跟数据有关系的3个单元格)
          var td = document.createElement("td");
          //把对象里面的属性值给  td
          //for(var k in obj){
          //     k 得到的是属性名
          //     obj[k]得到的是属性值
          // }
          td.innerHTML = datas_one[i][k];
          td.className = "class_td";
          tr.appendChild(td);
        }
        // 3 创建有删除两字的单元格
        var td = document.createElement("td");
        tr.appendChild(td);
        td.innerHTML = `<a href="javascript:;" class="btn_delect"   id="btn_delect_id"> 删除 </a><a href="javascript:;" class="btn_change" onclick="one();"> 修改 </a>`;
      }
      hidden_add_btn_Second.style.display = "block";
      hidden_add_btn_tip.style.display = "block";
      hidden_add_btn_tip.onclick = function () {
        clearInterval(timer);
        timer = null; //清除定时器
        hidden_add_btn_Second.style.display = "none";
        hidden_add_btn_tip.style.display = "none";
      };
      var timer = setInterval(function () {
        hidden_add.style.display = "none";
      }, 4000);
    }
    $.ajax({
      type: "post",
      url: "http://118.195.129.130:3000/food/add",
      data: {
        name: $(".hidden_add_textArea_one_right").val(),
        price: $(".hidden_add_textArea_two_right").val(),
        desc: $(".hidden_add_textArea_three_right").val(),
        typename: $(".hidden_add_textArea_four_right").val(),
        typeid: $(".hidden_add_textArea_five_right").val(),
      },
      success: function (data) {
        if (data.err === 0) {
          alert("添加成功！");
          console.log(data);
        } else {
          alert("添加失败！");
        }
      },
      error: function (err) {
        console.log(err);
      },
    });
    hidden_add_textArea_one_right.value = "";
    hidden_add_textArea_two_right.value = "";
    hidden_add_textArea_three_right.value = "";

    add.onclick = function () {
      hidden_add.style.display = "block";
      hidden_add_btn_Second.style.display = "none";
      hidden_add_btn_tip.style.display = "none";
      clearInterval(timer);
      timer = null; //清除定时器
    };
  };
};
// 4 删除操作 开始
//创建单元格和删除操作
// var datas = [
//   {
//     name: "aa",
//     class: "30",
//     office: "一班",
//     typename: "bb",
//     typeid: "0",
//   },
//   {
//     name: "aa",
//     class: "30",
//     office: "一班",
//     typename: "bb",
//     typeid: "0",
//   },
//   {
//     name: "aa",
//     class: "30",
//     office: "一班",
//     typename: "bb",
//     typeid: "0",
//   },
//   {
//     name: "aa",
//     class: "30",
//     office: "一班",
//     typename: "bb",
//     typeid: "0",
//   },
// ];
// //往tbody创建行，有几人创建几行
// var tbody = document.querySelector("tbody");
// for (var i = 0; i < datas.length; i++) {
//   //外边的for循环管行
//   // 1 创建行
//   var tr = document.createElement("tr");
//   tbody.appendChild(tr);
//   tr.className = "class_tr";
//   //行里边创建单元格 td 单元格的数量取决于每个对象里面的属性的个数
//   for (var k in datas[i]) {
//     // 2 创建单元格(跟数据有关系的3个单元格)
//     var td = document.createElement("td");
//     //把对象里面的属性值给  td
//     //for(var k in obj){
//     //     k 得到的是属性名
//     //     obj[k]得到的是属性值
//     // }
//     td.innerHTML = datas[i][k];
//     tr.appendChild(td);
//     td.className = "class_td";
//   }
//   // 3 创建有删除两字的单元格
//   var td = document.createElement("td");
//   td.innerHTML =
//     '<a href="javascript:;"  class="btn_delect"> 删除 </a> <a href="javascript:;" class="btn_change"> 修改 </a>';
//   tr.appendChild(td);
// }
// 4 删除操作 开始
// var as_id = document.getElementById("btn_delect_id");
// var as = document.getElementsByClassName("btn_delect");
// function change() {
//   for (let i = 0; i < as.length; i++) {
//     as[i].onclick = function () {
//       alert("请问您真的要删除么？");
//       //点击a所在的行，(链接的爸爸的爸爸)，node.removeChild(child)
//       tbody.removeChild(this.parentNode.parentNode);
    //   as_id.onclick = function(){
    //     alert('a');
    //     this.parentNode.parentNode.remove(tr);
    //     $.ajax({
    //         type: "post",
    //         url: "http://118.195.129.130:3000/food/del",
    //         data: {
    //           _id: $(".id_tr"),
    //         },
    //         success: function (data) {
    //           if (data.err === 0) {
    //             alert("删除成功");
    //             console.log(data);
    //           } else {
    //             alert("删除失败");
    //             console.log(data);
    //           }
    //         },
    //         error: function (err) {
    //           console.log(err);
    //         },
        //   });
    // };

    
//     };
//   }
// }
// change();
//修改操作
var id_table = document.getElementById("id_table");
var change_a = id_table.getElementsByClassName("btn_change");
//为修改操作的每一个a绑定事件
one();
function one() {
  for (let i = 0; i < change_a.length; i++) {
    change_a[i].onclick = function () {
      alert("您现在可以修改数据了！");
      //获取该a的tr
      let tr = this.parentNode.parentNode;
      var tds = tr.getElementsByClassName("class_td");
      //获取到的每一个td为它们绑定点击事件
      for (let i = 0; i < tds.length; i++) {
        tds[i].setAttribute("contenteditable", "plaintext-only");
        // tr.onblur = function(){
        //   alert('a');
        //   tds[i].setAttribute('contenteditable','');
        //  };
      }
    };
  }
}
//搜索功能
// setDatas(value);
function setDatas(mydatas) {
  tbody.innerHTML = "";
  mydatas.forEach(function (value) {
    var tr = document.createElement("tr");
    tr.innerHTML = `<td class="class_td">${value.name}</td>
                 <td class="class_td">${value.class}</td>
                 <td class="class_td">${value.office}</td>`;
    tbody.appendChild(tr);
    var td = document.createElement("td");
    td.innerHTML = `<a href="javascript:;" class="btn_delect"> 删除 </a> <a href="javascript:;" class="btn_change"> 修改 </a>`;
    tr.appendChild(td);
  });
}
var name_btn = document.querySelector(".name_btn");
var class_btn = document.querySelector(".class_btn");
var office_btn = document.querySelector(".office_btn");
var title_select_one_right = document.querySelector(".title_select_one_right");
var title_select_two_right = document.querySelector(".title_select_two_right");
var title_select_three_right = document.querySelector(
  ".title_select_three_right"
);
name_btn.onclick = function () {
  var nodesArray = Array.prototype.slice.call(
    document.querySelectorAll(".class_td")
  );
  // console.log(nodesArray);
  nodesArray.some(function (value) {
    if (nodesArray == name_btn.value) {
      return true;
    }
  });
  setDatas();
};
